<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
            div(class="header")
                div(class="left")
                    div
                      span 基础总量:
                      div(class="meta")
                          control-amount(v-model="model",:working="currentState == 'amount'",ref="amountName")
                          span u
                    div
                      span 作息校正:
                      div(class="meta")
                        span(:class="{'active-block': currentState == 'time_diff'}") {{timeDiff.value >0 ? '+':''}}{{timeDiff.value}}
                        span h
                div(class="right")
                    div(style="border:1px solid #000; display:inline-block; padding: 1px")
                        div(:class="{'active-block': currentState == 'execute'}")
                            div 执
                            div 行

            div(class="chart")
                rate-chart(v-model="rateValues" :max="3")

</template>

<script>
export default {
  data() {
    return {
      amountNameTemp: window.rate.basicRate.name,
      model: {
        value: {
          name: window.rate.basicRate.name,
          value: window.rate.basicRate.name
        },
        amountNameTemp: window.rate.basicRate.name,
        increment: 2,
        max: 40,
        min: 6,
        planUsing: window.rate.planUsing,
        onChange(model) {
          model.amountNameTemp = model.value.value;
        }
      },

      timeDiff: window.advance.timeDiff,
      medicalCat: window.advance.medicalCat,
      medicalStrength: window.advance.medicalStrength,

      selectVisible: false,
      chart: null,
      currentState: "amount" // amount:基础总量 time_diff:作息校正 execute:执行
    };
  },
  computed: {
    rateValues() {
      return this.rate.value.map(t => {
        return t.value;
      });
    },
    rate() {
      const amount = this.model.amountNameTemp;
      let found = window.fastRateTable.find(t => {
        return t.name == amount;
      });
      if (!found) {
        found = window.fastRateTable[0];
        this.model.value.value = found.name;
      }
      return found;
    }
  },
  methods: {
    up() {
      if (this.currentState == "amount") this.$refs.amountName.up();
      else if (this.currentState == "time_diff")
        this.timeDiff.value =
          this.timeDiff.value >= 4 ? -4 : parseInt(this.timeDiff.value) + 1;
    },
    down() {
      if (this.currentState == "amount") this.$refs.amountName.down();
      else if (this.currentState == "time_diff") {
        this.timeDiff.value =
          this.timeDiff.value <= -4 ? 4 : parseInt(this.timeDiff.value) - 1;
      }
    },
    back() {
      if (this.currentState == "amount")
        this.$router.push("/base-rate/index?index=1");
      else if (this.currentState == "time_diff") this.currentState = "amount";
      else if (this.currentState == "execute") {
        this.currentState = "time_diff";
      }
    },
    yes() {
      if (this.currentState == "amount") this.currentState = "time_diff";
      else if (this.currentState == "time_diff") this.currentState = "execute";
      else if (this.currentState == "execute") {
        window.rate.basicRate = this.rate;

        // 需要修改当前正在使用的方案值
        switch (window.rate.planUsing) {
          case "C":
            window.rate.planC = this.rate;
            break;
          case "B":
            window.rate.planB = this.rate;
            break;
          case "A":
            window.rate.planA = this.rate;
            break;
        }

        const newRecord = Object.assign(
          { type: window.advance.medicalCat.value, createTime: new Date() },
          window.rate.basicRate
        );
        // 写入到记录中
        window.rate.records.push(newRecord);
        window.advance.timeDiff = this.timeDiff; // 记录校正值
        this.$router.push("/base-rate/index?index=1");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  height: 31px;
  clear: both;
  @left-width: 150px;
  .left {
    float: left;
    padding: 4px 0 0 6px;
    font-size: 17px;

    .meta{
        display: inline-block;
        width: 35px;
        margin-left: 5px;
        text-align: right;
    }
  }
  .right {
    text-align: center;
    float: right;
    width: 34px;
    padding-top: 5px;
    font-size: 14px;
  }
}
.chart {
  margin-top: 10px;
  height: 62px;
}
</style>